<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.nickName" placeholder="用户名" style="width: 170px;"></el-input>
        <!-- <el-input clearable v-model="search.phone" placeholder="手机号" style="width: 170px;margin-left:5px;"></el-input> -->
        <el-input clearable v-model="search.shopName" placeholder="店铺" style="width: 170px;margin-left:5px;"></el-input>
        
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list"  border fit highlight-current-row stripe  style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="信息">
        <template slot-scope="scope">
          <div style="">
            <span style="width:50px"><el-image :src="scope.row.headPortrait" style="width:40px;height:40px;border-radius:50%"></el-image> </span>
            <span style="margin-left:5px; display:flex;flex-wrap:wrap;">
              <span style="width:100%;">{{scope.row.nickName}}</span>
              <span style="width:100%;">{{scope.row.userPhone}}</span>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="分成比例%" align="center">
        <template slot-scope="scope">
            {{scope.row.percentage}}
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="账户余额" align="center">
        <template slot-scope="scope">
            {{(scope.row.balance/100).toFixed(2)}}
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" label="店铺" align="center">
        <template slot-scope="scope">
            {{scope.row.shopName}}
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  min-width="15%">
        <template slot-scope="scope">
           {{scope.row.nofield}}
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />

    

    
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as shopApi from '@/api/shop'
import * as couponApi from '@/api/coupon'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'
import QRCode from 'qrcodejs2'

export default {
  name: 'SpokerInfoShop',
  components: { Pagination,BxImage },
  data(){
    return{
      spokersCountLimit:43,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        shopName:'',
        nickName:'',
      },
      search:{
        shopName:'',
        nickName:'',
      },
      selectOptions:{
         
      }
    }
  },
  created(){
      var that=this;
      that.getList();
  },
  mounted(){

  },
  methods: {
   
    getList(){
      var that=this;
      that.listLoading = true;
      shopApi.getSpokerList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              item.imageConvert=imageHelper.GetFullUrl(item.shopLogo,200,200);
              item.state=1;
              
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
            that.$nextTick(()=>{
                that.generateQrCode();
            });
         }
      })
    },
    generateQrCode(){
        // var that=this;
        // that.list.map(item=>{
        //     new QRCode(that.$refs['spokesCode_'+item._id], {
        //         text: item.spokesCode,
        //         width: 50,
        //         height: 50,
        //         colorDark: "#333333", //二维码颜色
        //         colorLight: "#ffffff", //二维码背景色
        //         correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
        //         });
        //     });
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.nickName=that.search.nickName.trim();
      that.listQuery.shopName=that.search.shopName.trim();
      that.getList();
    },
  }
}
</script>
